<!-- 这是员工的请假状态展示页面 -->

<template>
    <div>
        <h1>这是员工的请假状态展示页面</h1>
        <el-table :data="leaveStatusData" :default-sort="{prop: 'leaveId', order: 'descending'}">
            <el-table-column label="假条ID" prop="leaveId" sortable :sort-method="leaveIdSortMethod"></el-table-column>
            <el-table-column label="创建时间" prop="createdTime" width="150px"></el-table-column>
            <el-table-column label="假条状态">
                <el-table-column label="已申请" prop="leaveStatus" sortable>
                    <template slot-scope="scope">
                        <template>
                            <el-tag type="success">已申请</el-tag>
                        </template>
                    </template>
                </el-table-column>
                <el-table-column label="已审批" prop="leaveStatus" sortable>
                    <template slot-scope="scope">
                        <template v-if="scope.row.leaveStatus === '2' || scope.row.leaveStatus ===  '4' || scope.row.leaveStatus === '5' ">
                            <el-tag type="success">已通过</el-tag>
                        </template>
                        <template v-else-if="scope.row.leaveStatus === '1'">
                            <el-tag type="warning">等待中</el-tag>
                        </template>
                        <template v-else-if="scope.row.leaveStatus === '3'">
                            <el-tag type="danger">已拒绝</el-tag>
                        </template>
                    </template>
                </el-table-column>
                <el-table-column label="已销假" prop="leaveStatus" sortable>
                    <template slot-scope="scope">
                        <template v-if="scope.row.leaveStatus === '4'">
                            <el-tag type="success">已销假</el-tag>
                        </template>
                        <template v-else-if="scope.row.leaveStatus === '2' || scope.row.leaveStatus === '1' || scope.row.leaveStatus === '3'">
                            <el-tag type="warning">等待中</el-tag>
                        </template>
                        <template v-else-if="scope.row.leaveStatus === '5'">
                            <el-tag type="danger">已超时</el-tag>
                        </template>
                    </template>
                </el-table-column>
            </el-table-column>
            <el-table-column label="详细信息">
                <template v-slot:default="scope">
                    <!-- <p>{{ scope.row.leaveId }}</p> -->
                    <el-button type="primary" size="small" @click="changeIsShowLeaveApplicationDialog(scope.row.leaveId)">
                        打开
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog :visible="isShowLeaveApplicationDialog" :before-close="function(){isShowLeaveApplicationDialog = false}">
            <leave-application :leaveId="leaveId" user-type="employee" @getLeaveStatusData="getLeaveStatusData"></leave-application>
        </el-dialog>
    </div>
</template>

<script>
    import axios from "axios"
    import leaveApplication from "./leaveApplication.vue"

    export default {
        name: "leaveStatus",
        data: function() {
            return {
                leaveStatusData: [{
                    leaveId: "1",
                    /*
                        0: 未申请
                        1：已申请，等待审批； 
                        2：审批通过，等待员工确认；
                        3：审批未通过，失败；
                        4：审批通过，员工已确认；
                        5：审批通过，员工拒绝
                    */
                    leaveStatus: "5", // 
                }],
                isShowLeaveApplicationDialog: false,
                leaveId: "",
            }
        },
        methods: {
            /* 获取请假状态列表 */
            getLeaveStatusData: function() {
                this.leaveStatusData.length = 0;
                var _this = this;
                axios.get("http://127.0.0.1:8000/api/leave/user/", {
                        params: {
                            user_id: _this.$store.state.userId
                        }
                    })
                    .then(function(response) {
                        console.log("getLeaveStatusData");
                        console.log(response.data.data);
                        response.data.data.leave_all.forEach(function(item, index) {
                            let tmp = {}
                            tmp.leaveId = item.leave_id;
                            tmp.leaveStatus = item.leave_status;
                            tmp.createdTime = item.created_name;
                            _this.leaveStatusData.push(tmp);
                            console.log(_this.leaveStatusData);
                        });
                    })
                    .catch(function(error) {
                        console.log(error);
                    })
            },
            changeIsShowLeaveApplicationDialog: function(leaveId) {
                console.log(leaveId);
                this.leaveId = leaveId;
                this.isShowLeaveApplicationDialog = !this.isShowLeaveApplicationDialog;
            },

            /**
             * @description ID排序。
             */
            leaveIdSortMethod: function(a, b) {
                a = Number(a);
                b = Number(b);
                return a < b;
            }
        },
        mounted: function() {
            this.getLeaveStatusData();
        },
        watch: {},
        components: {
            leaveApplication
        }
    }
</script>

<style>
</style>
